<template>
  <div class="flex-con flex-row justify-start w-full p-10">
    <a-button type="text" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
  </div>
</template>
<script setup lang="ts">
import { ref, defineModel } from 'vue'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'

const model = defineModel()
const collapsed = ref(false)

function update() {
  model.value = collapsed.value
}

/**
 * 收起
 */
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
  update()
}
</script>

<style scoped></style>
